Jassif Team Institution

<template>
  <h1>Food</h1>
  <div @click="this.activeComp = 'food-about'" class="divBtn">About</div>
  <div @click="this.activeComp = 'food-kinds'" class="divBtn">Kinds</div>
  <div id="divComp">
    <component :is="activeComp"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeComp: 'food-about',
      foods: [
        { name: 'Pizza', imgUrl: '/img_pizza.svg' },
        { name: 'Apple', imgUrl: '/img_apple.svg' },
        { name: 'Cake', imgUrl: '/img_cake.svg' },
        { name: 'Fish', imgUrl: '/img_fish.svg' },
        { name: 'Rice', imgUrl: '/img_rice.svg' }
      ]
    }
  },
  provide() {
    return {
      foods: this.foods
    }
  }
}
</script>

<template>
    <h2>Different Kinds of Food</h2>
    <p><mark>In this application, food data is provided in "App.vue", and injected in the "FoodKinds.vue" component so that it can be shown here:</mark></p>
    <div v-for="x in foods">
        <img :src="x.imgUrl">
        <p class="pName">{{ x.name }}</p>
    </div>
</template>

<script>
export default {
    inject: ['foods']
}
</script>

<style scoped>
    div {
        margin: 10px;
        padding: 10px;
        display: inline-block;
        width: 80px;
        background-color: #28e49f47;
        border-radius: 10px;
    }
    .pName {
        text-align: center;
    }
    img {
        width: 100%;
    }
</style>

<script>
import { computed } from 'vue'

export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 30
      }
    }
  },
  provide() {
    return {
      // Computed property for reactivity
      userName: computed(() => this.user.name),
      userAge: computed(() => this.user.age),
      
      // Method to update data reactively
      updateUser: (newName, newAge) => {
        this.user.name = newName
        this.user.age = newAge
      }
    }
  }
}
</script>

// ThemeProvider.vue - Root component
<script>
export default {
  data() {
    return {
      theme: 'light',
      themes: {
        light: { bg: '#fff', text: '#000' },
        dark: { bg: '#333', text: '#fff' }
      }
    }
  },
  provide() {
    return {
      theme: this.theme,
      currentTheme: () => this.themes[this.theme],
      toggleTheme: () => {
        this.theme = this.theme === 'light' ? 'dark' : 'light'
      }
    }
  }
}
</script>

// DeeplyNestedComponent.vue - Any child component
<script>
export default {
  inject: ['theme', 'currentTheme', 'toggleTheme'],
  methods: {
    applyTheme() {
      const theme = this.currentTheme()
      document.body.style.backgroundColor = theme.bg
      document.body.style.color = theme.text
    }
  }
}
</script>